<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <hr>
        <Head-one></Head-one>
        <paremt></paremt>
    </div>

    <template id="paremt">
        <div>
            <h2>parent - parent - 父组件</h2>
            <h2>text == {{text}}</h2>
            <hr>

            <childone :text="text" ref="one">

            </childone>
            <hr>
            <childtwo @qazwsx="changeText" :changedata="changeData" :changeonenum="changeOneNum" @change="changenum">

            </childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2> childone - childone - 子组件 - 1 </h2>
            <button @click="changeOneCount">点击修改 childtwo - count </button>
            <button @click="changeTwoWord">点击修改 childtwo - word</button>
            <h4>text == {{text}}</h4>
            <h2>num == {{num}}</h2>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2> childtwo - childtwo - 子组件 - 2 </h2>
            <h2>count -- {{count}}</h2>
            <h2>word -- {{word}}</h2>
            <button @click="changeOneData">自定义去修改 组件one</button>
            <button @click="changeOneDataParent">$parent 去修改 组件one</button>
            <button @click="changedata('2110- YYDS - 人人15K')"> 反向props 去修改 组件one </button>
            <p>
                <button @click="changeOneNumParent">$parent 去修改 组件one(num)</button>
                <button @click="changeonenum">反向props 去修改 组件one (num )</button>
                <button @click="change"> 自定义事件 去修改 组件one (num )</button>

            </p>

        </div>
    </template>
</body>
<script>
    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)

    const bus = new Vue() // 事件总线 空的Vue实例 

    Vue.component("paremt", {
        template: "#paremt",
        data() {
            return {
                text: "2110 - 越来越放弃"
            }
        },
        methods: {
            changeText(text) {
                this.text = text
            },
            changeData(text) {
                this.text = text
            },
            changeOneNum() {
                this.$refs.one.num += 40
            },
            changenum() {
                this.$refs.one.num += 200
            }
        }
    })

    Vue.component("childone", {
        template: "#childone",
        data() {
            return {
                num: 2021
            }
        },
        props: {
            text: String
        },
        methods: {
            changeOneCount() {
                bus.$emit("changeOneCount", 20)
            },
            changeTwoWord() {
                bus.$emit("changeTwoWord", "wh2110-daydayup-YYDS")
            }
        }
    })

    Vue.component("childtwo", {
        template: "#childtwo",
        props: {
            changedata: Function,
            changeonenum: Function
        },
        mounted() {
            bus.$on("changeOneCount", count => {
                this.count += count
            })
        },
        created() {
            bus.$on("changeTwoWord", word => {
                this.word = word;
            })
        },
        methods: {
            changeOneData() {
                this.$emit("qazwsx", "每天熬夜到晚上2点....")
            },
            changeOneDataParent() {
                this.$parent.text = "Are you OK????"
            },
            changeOneNumParent() {
                this.$parent.$refs.one.num += 10;
            },
            change() {
                this.$emit("change")
            }
        },
        data() {
            return {
                count: 2000,
                word: "hello  wh2110"
            }
        }
    })
    // 根实例 根组件
    const vm = new Vue({
        data: {
            title: "Vue 组件 兄弟组件通信   ",
            word: 'wh2110-daydayup'
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>

<!-- 

    组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit
        On
        Once  只触发一次  


        组件之间的通信
        1.父组件访问子组件  （父组件修改子组件）
        a.props     必须动态props 父组件修改自身的变量  把变化的值传入 子组件 子组件接收动态props
        b.refs
        c.事件center总线 （bus new Vue）
        d.events 事件
        e.vuex（最后一天）

        2.子组件访问父组件
        a.自定义事件    emit    子组件发送事件  on父组件监听事件 修改内部变量
        b.$parent       父实例，如果当前实例有的话  父组件
        c.逆向props     父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数 实现子改父
        d.事件center总线
        e.vuex

        3.兄弟组件之间的通信
        a.事件center总线（bus new Vue）=
        b.中间人模式 （子改父 父改子） 把父亲当做中间人
        c.vuex

        refs  this.$refs
        1.绑定到标签  指的当前的真实DOM
        2.绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数

 -->

</html>